<template>
  <div class="box">
    <div class="titles">
      <div class="name">
        <h1 class="title">用户权限设置</h1>
      </div>
      <div class="btn">
        <a-button type="primary" @click="handelRegister">注册</a-button>
      </div>
    </div>
    <a-table :columns="columns" :data="userStore.userObj" style="height: 700px">
      <template #optional="record"> </template>
    </a-table>
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>
        <strong>注册用户</strong>
      </template>
      <div>
        <a-form :model="form" :style="{ width: '400px' }">
          <a-form-item
            field="username"
            tooltip="请输入用户名"
            hide-asterisk
            :rules="[
              { required: true, message: '必须填写用户名' },
              { minLength: 2, message: '用户名不能低于两位' },
            ]"
          >
            <a-input
              class="input"
              v-model="form.username"
              placeholder="请输入用户名称"
            />
          </a-form-item>
          <a-form-item
            field="password"
            :rules="[
              { required: true, message: '必须填写密码' },
              { minLength: 6, message: '用户名不能低于六位' },
            ]"
          >
            <a-input
              v-model="form.password"
              placeholder="请输入登录密码"
              class="input"
            />
          </a-form-item>
          <a-form-item>
            <a-select
              :style="{ width: '480px' }"
              placeholder="请选择权限"
              v-model="selValue"
            >
              <a-option v-for="role in roleArr">{{ role.roleName }}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { getUsers, getUser, registerRole } from "../../api/user/user";
import { reactive, ref } from "vue";
import { useUser } from "../../store/user";
import { Message } from "@arco-design/web-vue";

// form 双向绑定约束
interface FormType {
  username: string;
  password: string;
}

//select v-model
let selValue = ref<string>("");
// form 双向绑定
const form = reactive<FormType>({
  username: "",
  password: "",
});
const show = ref(true);

const userStore = useUser();
const columns = [
  {
    title: "用户名",
    dataIndex: "username",
  },
  {
    title: "权限",
    dataIndex: "role",
  },
  {
    title: "操作",
    slotName: "optional",
    width: 400,
  },
];

getUsers().then((res) => {
  userStore.userObj = res.data.results;
});
interface roleArrType {
  roleName: string;
}

// 渲染选择器
let roleArr = ref<Array<roleArrType>>([]);
getUser().then((res) => {
  roleArr.value = res.data.results;
});

// 编辑
let visible = ref<boolean>(false);
const handelRegister = (obj: any) => {
  visible.value = true;
};
// 注册数据包
// let regObj = reactive({})
const handleOk = () => {
  visible.value = false;
  let formObj = { role: selValue.value, ...form };
  registerRole(formObj).then((res) => {
    Message.success("注册成功");
    userStore.userObj.push(formObj);
    if (res.status !== 201) {
      Message.error('注册失败')
    }
  });
};
const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped>
.box {
  margin-top: 50px;
}
.title {
  color: #000;
  text-align: left;
  border-left: 5px solid #8dd1ff;
  padding-left: 20px;
  font-size: 25px;
}
.titles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.name {
  width: 300px;
}
.btn {
  width: 200px;
}
</style>
